<template>
  <div class="icon">
    <a :href="'http://' + props.webUrl" target="_blank">
      <img :src="props.icon" :alt="props.webName" />
    </a>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  webUrl: String,
  webName: String,
  icon: String,
})
const defaultIcon = 'https://files.codelife.cc/website/zhihu.svg'
</script>

<style scoped>
.icon {
  display: inline-block;
  width: 48px;
  height: 48px;
  border: 1px dashed;
  border-radius: 14px;
  padding: 5px;
}
.icon img {
  width: 100%;
  height: 100%;
  border-radius: 14px;
}
</style>
